<template>
<view>
	<view class="group-box" :style="'min-height:calc(100vh - 122rpx - '+CustomBar+'px)'">
		<view class="caption">
			<view class="flex" @click="chooseFutures">
				<text>先锋期货</text>
				<image src="@/static/home/subpage/drop-gray.png"></image>
			</view>
			<view class="flex" @click="chooseGoods">
				<text>按商品</text>
				<image src="@/static/home/subpage/drop-gray.png"></image>
			</view>
		</view>
		<view class="tab-box">
			<view class="tab active">近一周</view>
			<view class="tab">近一月</view>
			<view class="tab">近六月</view>
			<view class="tab">近一年</view>
			<view class="tab" @click="getshowPicker">自定义</view>
		</view>
		<view class="title">{{beginDate}}至{{endDate}} 盈亏排行</view>
		<view v-if="true" class="qiun-charts" :style="{'height':barHeight+'rpx'}">
			<l-echart ref="barChart" @finished="barInit"></l-echart>
		</view>
		<view v-else class="nodata">
			<image src="@/static/home/subpage/no-data.png"></image>
		</view>
	</view>
	<tn-datepicker :beforeDateDisable="false" color="#EE5953" :show="showPicker" :ismylast="ismylast" :format="'yyyy-mm-dd'" :monthNum="6" :value="value" @confirm="ed" @cancel="ed" />
</view>
</template>

<script>
import * as echarts from '@/utils/echarts.min.js';		
export default {
	name:"profit",
	data() {
		return {
			CustomBar: this.CustomBar,
			barOption:{},
			barHeight:500,
			showPicker:false,
			ismylast: false,
			value: [],
			beginDate:'2023-11-02',
			endDate:'2023-11-08'
		};
	},
	props:{
		// date: [String,Number],
		// date1:{
		// 	type: Array,
		// 	default(){
		// 		return []
		// 	}
		// }
	},
	watch:{
		// value(newVal, oldVal) {
		// 	this.datevalue =newVal;
		// 	console.log(newVal, oldVal);
		// },
	},
	mounted(){
		
	},
	methods:{
		barInit() {
			this.barOption={
				color: 'rgba(0,0,0,0.45)',
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross'
					},
					backgroundColor:'#474747',
					textStyle:{
						color:'#fff',
						fontSize: 12
					}
				},
				grid: {
					right: '40',
					left:'0',
					top:'0',
					bottom:'0',
					containLabel: true
				},
				xAxis: {
					type: 'value',
					axisTick: {
						show: false,
						alignWithLabel: true,
					},
					axisLine: {
						show: false,
						lineStyle: {
							color: 'rgba(0,0,0,0.45)',
						}
					},
					axisLabel: {
						show: false,
						margin: 10,
					},
					splitLine:{
						lineStyle: {
							color: '#F6F7F9'
						}
					}
				},
				yAxis: {
					type: 'category',
					data: ['纯碱', '豆粕', '沪铅', '塑料', '锰硅', '沪铝','低硫燃油','纯碱', '豆粕', '沪铅', '塑料', '锰硅', '沪铝','低硫燃油'],
					position: 'left',
					alignTicks: true,
					// offset: 80,
					inverse: true,
					axisTick: {
						show: false,
						alignWithLabel: true
					},
					axisLine: {
						show: true,
						lineStyle: {
							color: '#F6F7F9'
						}
					},
					axisLabel: {
						show: true,
						formatter: '{value}',
						color: 'rgba(0,0,0,0.8)',
						fontSize: 12
					},
				},
				series: [
					{
						// name: '净持仓增减变化',
						type: 'bar',
						barWidth:'10',
						data:[
							{value: 7770,itemStyle: {color: '#EE5953'}},
							{value: 770,itemStyle: {color: '#EE5953'}},
							{value: 7770,itemStyle: {color: '#EE5953'}},
							{value: 770,itemStyle: {color: '#EE5953'}},
							{value: 7770,itemStyle: {color: '#EE5953'}},
							{value: 770,itemStyle: {color: '#EE5953'}},
							{value: 770,itemStyle: {color: '#EE5953'}},
							{value: 770,itemStyle: {color: '#EE5953'}},
							{value: 770,itemStyle: {color: '#33C45B'}},
							{value: 770,itemStyle: {color: '#33C45B'}},
							{value: 770,itemStyle: {color: '#33C45B'}},
							{value: 770,itemStyle: {color: '#33C45B'}},
							{value: 770,itemStyle: {color: '#33C45B'}},
							{value: 770,itemStyle: {color: '#33C45B'}},
						],
						itemStyle:{
							color:'#EE5953'
						},
						label:{
							show: true,
							color:'#EE5953',
							position: 'right',
							distance:8,
							formatter: '{c}万'
						}
					}
				]
			}
			this.barHeight =this.barOption.yAxis.data.length*50;
			this.$refs.barChart.init(echarts, chart=> {
				chart.setOption(this.barOption);
			});
		},
		chooseFutures(){
			this.$emit('chooseFutures', {
				// isshare: false
			})
		},
		closeFutures(){
			this.$emit('closeFutures', {
				// isshare: false
			})
		},
		chooseGoods(){
			
		},
		ed(e) {
			this.ismylast =true;
			setTimeout(()=>{
				this.showPicker = false;
				this.ismylast =false;
			},600)
			if(e) {
				this.beginDate =e.value[0];
				this.endDate =e.value[1];
				// console.log(e.value);
			}
		},
		getshowPicker(){
			this.showPicker = true;
			var bdate=this.beforeTime(5)+'/01';
			this.value =[bdate];
		},
		// 获取前5天日期
		nextCalendar(){
			var nextWeek = new Date();
			var start = this.currentDate.getTime()/1000;
			var end = start - (60*60*24*5);
			nextWeek = new Date(parseInt(end) * 1000);
			this.currentDate =nextWeek;
			this.getweek(nextWeek);
		},
		// n个月前
		beforeTime (n) {
			let date = new Date()
			date.setMonth(date.getMonth() - n)
			date.toLocaleDateString()
			let y = date.getFullYear()
			let m = date.getMonth() + 1
			var d=  date.getDate();
			m = m < 10 ? '0' + m : m
			return y + '/' + m
		},
		// monthCalendar(){
		// 	this.$emit('monthCalendar', {
		// 		// isshare: false
		// 	})
		// },
	}
}
</script>

<style lang="scss" scoped>
.group-box{
	background: #FFFFFF;
	border-radius: 16rpx;
	padding:24rpx;
	box-sizing: border-box;
	.caption{
		display: flex;
		align-items: center;
		border-bottom:2rpx solid #F6F7F9;
		padding-bottom:24rpx;
		.flex{
			display: flex;
			align-items: center;
			margin-right:32rpx;
			& image{
				width:46rpx;height:46rpx;
				margin-left:8rpx;
			}
			& text{
				font-size: 32rpx;
				font-weight: bold;
				color: rgba(0,0,0,0.8);
			}
		}
	}
	.tab-box{
		margin-top:32rpx;
		display: flex;
		align-items: center;
		.tab{
			height: 72rpx;
			padding:0 18rpx;
			background: #F4F5F7;
			border-radius: 8rpx;
			font-size: 28rpx;
			color: rgba(0,0,0,0.6);
			line-height: 72rpx;
			margin-left:16rpx;
		}
		.tab.active{
			background: #EE5953;
			color:#fff;
		}
		.tab:first-child{
			margin-left:0;
		}
	}
	.title{
		margin-top:32rpx;
		font-size: 28rpx;
		color: rgba(0,0,0,0.8);
	}
	.qiun-charts{
		margin-top:70rpx;
		height: 500rpx;
	}
}	
.nodata{
	padding-top:82rpx;
	padding-bottom:24rpx;
	text-align: center;
	& image{
		width:294rpx;height:326rpx;
	}
}
</style>
